<template>
  <div class="room" :style="videoStyle">
    <div v-if="connecting" class="connecting">
    </div>
    <call-media v-if="$store.state.useType === '1'"></call-media>
    <call-live v-if="$store.state.useType === '2'"></call-live>
  </div>
</template>

<script>
  import CallMedia from './components/CallMedia'
  import CallLive from './components/callLive'
  export default {
    name: "App",
    data() {
      return {}
    },
    computed: {
      connecting() {
        return this.$store.state.connecting
      },
      connected() {
        return this.$store.state.connected
      },
      webcamInProgress() {
        return this.$store.state.webcamInProgress
      },
      videoStyle() {
        let width = this.$store.state.width
        let height = this.$store.state.height
        return {
          width: typeof width === 'string' ? width : width + 'px',
          height: typeof height === 'string' ? height : height + 'px'
        }
      }
    },
    components: {
      CallMedia,
      CallLive
    }
  }
</script>
